// 模拟的域数据库，存储所有可加入的域
const domainDatabase = [
  { id: '123', name: '域A', avatarSeed: 'domain-a' },
  { id: '456', name: '域B', avatarSeed: 'domain-b' },
  { id: '789', name: '域C', avatarSeed: 'domain-c' }
];

// 用户加入的域列表
const domains = [];

// 获取加号元素、域头像容器元素和模态框相关元素
const plusSign = document.getElementById('plus-sign');
const domainAvatarsContainer = document.getElementById('domain-avatars-container');
const modal = document.getElementById('myModal');
const closeBtn = document.querySelector('.close');
const createBtn = document.getElementById('create-btn');
const joinBtn = document.getElementById('join-btn');
const searchBtn = document.getElementById('search-btn');
const domainIdInput = document.getElementById('domain-id');
const searchResult = document.getElementById('search-result');

// 获取右键菜单元素
const contextMenu = document.getElementById('context-menu');
const deleteDomainOption = document.getElementById('delete-domain');
const leaveDomainOption = document.getElementById('leave-domain');

// 当前搜索到的域
let searchedDomain = null;

// 当前选中的域
let selectedDomain = null;

// 生成随机头像 URL（使用 DiceBear 的 API）
function getRandomAvatarUrl(seed) {
  return `https://api.dicebear.com/7.x/identicon/svg?seed=${seed}`;
}

// 模拟创建域的函数，这里简单添加一个域对象到数组中
function createDomain() {
  const newDomain = {
    id: Date.now(),  // 简单用时间戳模拟唯一id
    name: `Domain ${domains.length + 1}`,  // 简单生成域名称
    avatarSeed: `domain-${Date.now()}`,  // 生成随机种子
    isOwner: true  // 标记为自己创建的域
  };
  domains.push(newDomain);
  renderDomainAvatars();
  modal.style.display = "none";
}

// 搜索域
function searchDomain() {
  const domainID = domainIdInput.value.trim();
  if (!domainID) {
    alert('请输入域ID');
    return;
  }

  // 在域数据库中查找
  const domain = domainDatabase.find(domain => domain.id === domainID);
  if (domain) {
    searchedDomain = domain;  // 保存搜索到的域
    showSearchResult(domain);  // 显示搜索结果
    joinBtn.style.display = 'block';  // 显示“加入”按钮
  } else {
    searchedDomain = null;  // 清空搜索到的域
    searchResult.innerHTML = '<p>未找到该域</p>';  // 显示未找到提示
    joinBtn.style.display = 'none';  // 隐藏“加入”按钮
  }
}

// 显示搜索结果
function showSearchResult(domain) {
  searchResult.innerHTML = `
    <img src="${getRandomAvatarUrl(domain.avatarSeed)}" alt="${domain.name}">
    <p>${domain.name}</p>
  `;
}

// 加入域
function joinDomain() {
  if (searchedDomain) {
    // 检查是否已经加入该域
    const isAlreadyJoined = domains.some(domain => domain.id === searchedDomain.id);
    if (isAlreadyJoined) {
      alert('你已经加入该域，无法重复加入！');
      return;
    }

    // 如果未加入，则添加到用户域列表
    const newDomain = {
      id: searchedDomain.id,
      name: searchedDomain.name,
      avatarSeed: searchedDomain.avatarSeed,
      isOwner: false  // 标记为加入的域
    };
    domains.push(newDomain);  // 添加到用户域列表
    renderDomainAvatars();  // 重新渲染头像列表
    modal.style.display = "none";  // 关闭模态框
    clearSearch();  // 清空搜索信息
  }
}

// 清空搜索信息
function clearSearch() {
  domainIdInput.value = '';  // 清空搜索框
  searchResult.innerHTML = '';  // 清空搜索结果
  joinBtn.style.display = 'none';  // 隐藏“加入”按钮
  searchedDomain = null;  // 清空搜索到的域
}

// 显示右键菜单
function showContextMenu(x, y, isOwner) {
  contextMenu.style.display = 'block';
  contextMenu.style.left = `${x}px`;
  contextMenu.style.top = `${y}px`;

  // 根据域类型设置菜单选项
  if (isOwner) {
    deleteDomainOption.style.display = 'block';
    leaveDomainOption.style.display = 'none';
  } else {
    deleteDomainOption.style.display = 'none';
    leaveDomainOption.style.display = 'block';
  }
}

// 隐藏右键菜单
function hideContextMenu() {
  contextMenu.style.display = 'none';
}

// 删除域
deleteDomainOption.addEventListener('click', () => {
  if (selectedDomain) {
    const index = domains.findIndex(domain => domain.id === selectedDomain.id);
    if (index !== -1) {
      domains.splice(index, 1);  // 从数组中移除域
      renderDomainAvatars();  // 重新渲染头像列表
    }
  }
  hideContextMenu();
});

// 退出域
leaveDomainOption.addEventListener('click', () => {
  if (selectedDomain) {
    const index = domains.findIndex(domain => domain.id === selectedDomain.id);
    if (index !== -1) {
      domains.splice(index, 1);  // 从数组中移除域
      renderDomainAvatars();  // 重新渲染头像列表
    }
  }
  hideContextMenu();
});

// 渲染域头像的函数
function renderDomainAvatars() {
  domainAvatarsContainer.innerHTML = ''; // 清空现有内容
  domains.forEach((domain) => {
    const avatarDiv = document.createElement('div');
    avatarDiv.className = 'domain-avatar';

    // 创建头像图片元素
    const avatarImg = document.createElement('img');
    avatarImg.src = domain.avatar || getRandomAvatarUrl(domain.avatarSeed); // 使用自定义头像或随机头像
    avatarImg.alt = domain.name;
    avatarImg.style.width = '100%';
    avatarImg.style.height = '100%';
    avatarImg.style.borderRadius = '50%';

    // 添加右键点击事件
    avatarDiv.addEventListener('contextmenu', (e) => {
      e.preventDefault();  // 阻止默认右键菜单
      selectedDomain = domain;  // 设置当前选中的域
      showContextMenu(e.clientX, e.clientY, domain.isOwner);  // 显示右键菜单
    });

    avatarDiv.appendChild(avatarImg);
    domainAvatarsContainer.appendChild(avatarDiv);
  });
}

// 给加号元素添加点击事件监听器，点击时弹出模态框
plusSign.addEventListener('click', () => {
  modal.style.display = "block";
  clearSearch();  // 清空搜索信息
});

// 给关闭按钮添加点击事件监听器，点击时关闭模态框
closeBtn.addEventListener('click', () => {
  modal.style.display = "none";
  clearSearch();  // 清空搜索信息
});

// 给创建按钮添加点击事件监听器
createBtn.addEventListener('click', () => {
  createDomainModal.style.display = 'block'; // 显示创建域的模态框
});

// 给搜索按钮添加点击事件监听器
searchBtn.addEventListener('click', searchDomain);

// 给加入按钮添加点击事件监听器
joinBtn.addEventListener('click', joinDomain);

// 点击页面其他位置隐藏右键菜单
document.addEventListener('click', hideContextMenu);

// 拖动功能
let isDragging = false;
let offsetX, offsetY;

// 鼠标按下时开始拖动
modal.addEventListener('mousedown', (e) => {
  if (e.target === modal || e.target === modal.querySelector('.modal-content')) {
    isDragging = true;
    offsetX = e.clientX - modal.offsetLeft;
    offsetY = e.clientY - modal.offsetTop;
  }
});

// 鼠标移动时更新模态框位置
document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    modal.style.left = `${e.clientX - offsetX}px`;
    modal.style.top = `${e.clientY - offsetY}px`;
  }
});

// 鼠标松开时停止拖动
document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 关闭模态框
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// 显示模态框
function showModal() {
  modal.style.display = 'block';
}

// 示例：点击加号按钮显示模态框
document.getElementById('plus-sign').addEventListener('click', showModal);

// 获取相关元素
const createDomainModal = document.getElementById('create-domain-modal');
const closeCreateDomainModal = document.getElementById('close-create-domain-modal');
const avatarUpload = document.getElementById('avatar-upload');
const avatarPreview = document.getElementById('avatar-preview');
const confirmCreateBtn = document.getElementById('confirm-create-btn');
const domainNameInput = document.getElementById('domain-name');

// 显示创建域名的模态框
createBtn.addEventListener('click', () => {
  createDomainModal.style.display = 'block';
});

// 关闭创建域名的模态框
closeCreateDomainModal.addEventListener('click', () => {
  createDomainModal.style.display = 'none';
});

// 选择头像图片并预览
avatarUpload.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => {
      avatarPreview.innerHTML = `<img src="${event.target.result}" alt="头像预览">`;
    };
    reader.readAsDataURL(file);
  }
});

// 确认创建域
confirmCreateBtn.addEventListener('click', () => {
  const domainName = domainNameInput.value.trim();
  const avatarFile = avatarUpload.files[0];

  if (!domainName) {
    alert('请输入域名！');
    return;
  }

  if (!avatarFile) {
    alert('请选择头像图片！');
    return;
  }

  // 处理域名和头像数据
  const reader = new FileReader();
  reader.onload = (event) => {
    const avatarDataUrl = event.target.result;

    // 示例：将域名和头像数据保存到 domains 数组中
    const newDomain = {
      id: Date.now(), // 生成唯一 ID
      name: domainName,
      avatar: avatarDataUrl // 使用 base64 格式的头像
    };

    // 将新域添加到 domains 数组并重新渲染头像列表
    domains.push(newDomain);
    renderDomainAvatars();

    // 关闭模态框并清空输入
    createDomainModal.style.display = 'none';
    domainNameInput.value = '';
    avatarUpload.value = '';
    avatarPreview.innerHTML = '';
  };
  reader.readAsDataURL(avatarFile);
});